<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			li {
				list-style: none;
			}

			#box {
				width: 100%;
				padding: 30px;
				background-color: #F5F6F5;
			}

			table {
				background-color: white;
				width: 100%;
				table-layout: fixed;
				text-align: center;
				border-collapse: collapse;

			}

			table img {
				width: 100px;
			}

			thead>tr>th {
				border-bottom: 2px solid gainsboro;
				line-height: 50px;

			}

			.num {
				border: 1px solid gainsboro;
				width: 50%;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				line-height: 30px;
			}

			.num>button,
			.del {
				width: 20px;
				font-size: 20px;
				cursor: pointer;
				border: none;
				background-color: white;
			}

			#keep {
				display: flex;
				justify-content: space-between;
				background-color: white;
				padding-left: 20px;
				margin-top: 30px;
				line-height: 40px;
				color: #9E9E9E;
			}

			#keep>div:last-of-type {
				display: flex;
				align-items: center;
			}

			#keep>div:last-of-type>div:last-of-type {
				background-color: #FF6615;
				color: white;
				width: 100px;
				text-align: center;
				line-height: 40px;
				font-size: 20px;
				margin-left: 20px;
				cursor: pointer;
			}

			.red {
				color: red;
			}

			#d2 {
				margin-top: 30px;
			}
				
			#d2>div:first-of-type {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30px;
				color: #DCDCDC;
				margin-bottom: 20px;
			}

			#d2 hr {
				border: none;
				height: 2px;
				width: 30%;
				background-color: #DCDCDC;
			}

			#content {
				display: flex;
				justify-content: space-between;
			}

			#content>div {
				width: 18%;
				text-align: center;
				background-color: white;
				padding: 20px;
			}

			#content img {
				width: 100%;
				display: block;
				margin: 0 auto;
			}

			#content>div>div {
				margin: 6px;
			}

			#content .btn {
				background-color: #FF6615;
				color: white;
				width: 100px;
				margin: 0 auto;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
				display: none;
			}

			#content>div:hover .btn {
				display: block;
			}

			#content>div:hover .hp {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="ss">
				<table>
					<thead>
						<tr>
							<th>
								<input type="checkbox" name="" onclick="allCheck(this)" id="allCheck" value="" /><label
									for="allCheck">全选</label>
							</th>
							<th></th>
							<th>商品名称</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
				<div id="keep">
					<div>
						继续购物&emsp;|&emsp;共<span id="sumS" class="red">0</span>件商品，已选择<span id="checkSum"
							class="red">0</span>件
					</div>
					<div>
						<div>
							<span class="red">合计：<span id="sumTotal">0</span>元</span>
						</div>
						<div>
							去结算
						</div>
					</div>
				</div>
			</div>
			<div id="d2">
				<div>
					<hr>
					<div>
						买购物车中商品的人还购买了
					</div>
					<hr>
				</div>
				<div id="content">

				</div>
			</div>
		</div>
	</body>
	<script src="02/素材/02.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var con = document.querySelector("#content");
		var tbody = document.querySelector("tbody");


		var arr = JSON.parse(localStorage.obj).arr;
		var arr1 = [];;
		(function() {
			con.innerHTML = "";
			var str = "";
			for (let i = 0; i < arr.length; i++) {
				str += `
				<div>
					<img src="02/素材/${arr[i].img}" >
					<div>
						${arr[i].goodsName}
					</div>
					<div class="red">
						${arr[i].price}元
					</div>
					<div class="hp">
						${arr[i].goodsRatings}
					</div>
					<div class="btn" onclick = "addShop(${i})">
						加入购物车
					</div>
				</div>
				`
			}
			con.innerHTML = str;
		}());

		function addShop(i) {
			if (!arr[i].check) {
				arr[i].check = true;
				var obj = {
					data: arr[i],
					num: 1,
					index: i,
					check: false,
				}
				arr1.unshift(obj);
				showShop(arr1);
			} else {
				alert("已经在购物车中！");
			}

		}

		function showShop(arr) {
			tbody.innerHTML = ""
			var str = "";
			for (let i = 0; i < arr.length; i++) {

				str += `
			<tr>
				<td>
					<input type="checkbox"  ${arr[i].check?"checked":""}  onchange = "check(${i},this)" value="${i}" />
				</td>
				<td>
					<img src="02/素材/${	arr[i].data.img}" >
				</td>
				<td>
					${arr[i].data.goodsName}
				</td>
				<td>
					${arr[i].data.price}元
				</td>
				<td>
					<div class="num">
						<button onclick="jian(${i})" >-</button>
						<span>${arr[i].num}</span>
						<button onclick="jia(${i})">+</button>
					</div>
				</td>
				<td>${(arr[i].data.price * arr[i].num).toFixed(2)}元</td>
				<td><button class="del" onclick = "del(${i},${arr[i].index})">×</button></td>
			</tr>
			`;
			}
			tbody.innerHTML = str;
			jisuan();
		}

		function jia(i) {
			arr1[i].num = arr1[i].num + 1;
			showShop(arr1);
		}

		function jian(i) {
			if (arr1[i].num > 1) {
				arr1[i].num--;
				showShop(arr1);
			}
		}

		function del(i, index) {
			arr1.splice(i, 1);
			arr[index].check = false;
			showShop(arr1);
		}

		function check(i, t) {
			arr1[i].check = t.checked;
			console.log(arr1[i].check);
			jisuan();
		}

		var sumS = document.querySelector("#sumS");
		var sumTotal = document.querySelector("#sumTotal");
		var checkSum = document.querySelector("#checkSum");

		function jisuan() {
			var sumSda = 0;
			var sumTotalda = 0;
			var checkSumda = 0;

			for (let i = 0; i < arr1.length; i++) {
				if (arr1[i].check) {
					checkSumda += arr1[i].num;
					sumTotalda += arr1[i].num * arr1[i].data.price;
				}
				sumSda += arr1[i].num;
			}
			sumS.innerText = sumSda;
			sumTotal.innerText = sumTotalda.toFixed(2);
			checkSum.innerText = checkSumda;
		}

		function allCheck(t) {
			var inps = document.querySelectorAll("tbody>tr input");
			for (let i = 0; i < inps.length; i++) {
				inps[i].checked = t.checked;
				arr1[inps[i].value].check = t.checked;
			}
			jisuan();
		}
	</script>
</html>
